<template>
  <div class="page-main" v-title data-title="物料领用详情">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>物料领用详情</span></div>
    <div class="container">
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :xl="{ span: 14 }" :lg="{ span: 11 }"> </a-col>
          <a-col style="display: flex; justify-content: end">
            <a-button class="hte-btn del-btn" @click="showpagination = true">高级搜索</a-button>
          </a-col>
        </a-row>
      </div>

      <a-modal
        :visible="showpagination"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleSearch"
        @cancel="showpagination = false"
      >
        <a-form-model
          ref="ruleForm"
          :laba-col="labelCol"
          :wrapper-col="wrapperCol"
          @keyup.enter.native="handleToSearch"
        >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="成本中心:" prop="costNum">
                <a-input v-model="pagination.costCenter"> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="WBS元素:" prop="costNum">
                <a-input v-model="pagination.wbsNo"> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="物料编码:" prop="costNum">
                <a-input v-model="pagination.materialsNo"> </a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="预留单号:" prop="costNum">
                <a-input v-model="pagination.orderNo"> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="库存地点:" prop="costNum">
                <a-input v-model="pagination.materialsAddr"> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="物料名称:" prop="costNum">
                <a-input v-model="pagination.materialsRemark"> </a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
      <div class="content-list">
        <a-table
          :scroll="{ x: 1800 }"
          class="hte-table-content"
          :columns="columns"
          :data-source="records"
          :pagination="false"
          :rowKey="(record) => record.randomStr"
          bordered
          size="middle"
        >
          <template slot="nUseNumRender" slot-scope="text, record, index">
            <a-input v-model="record.nUseNum" @change="changeNUseNum(index)" />
          </template>
          <template slot="SOBSLRender" slot-scope="text, record">
            <div v-if="record.SOBSL == '10'">Y</div>
          </template>
        </a-table>
        <a-pagination
          show-size-changer
          :default-current="1"
          :total="pagination.total"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
          :show-total="(total) => `共 ${total} 条记录`"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { postAction } from '@/api/manage'
import { fermitTime } from '@/utils/util'
import { ColumnWidthMixin } from '@/views/materials/ColumnWidthMixin'
export default {
  mixins: [ColumnWidthMixin],
  name: 'MaterialsSap',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractTaskList',
      },
      dictMap: [],
      selectedRowKeys: [],
      multipleSelection: [],
      records: [],
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      pagination: {
        offset: 0,
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
      },

      loading: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      urls: {
        zmme17Data: '/materials/zmmeData',
      },
      maktxWidth: '120px',
      columns: [
        {
          title: '拣配单号',
          dataIndex: 'jpno',
          width: '120px',
          align: 'center',
        },
        {
          title: '配送单号',
          dataIndex: 'jpno',
          width: '120px',
          align: 'center',
        },
        {
          title: '预留/相关需求的编号',
          dataIndex: 'psno',
          width: '150px',
          align: 'center',
        },
        // {
        //   title: '预留 / 相关需求的项目编号',
        //   dataIndex: 'RSPOS',
        //   width: '170px',
        //   align: 'center',
        // },
        {
          title: '流水号',
          dataIndex: 'lsid',
          width: '100px',
          align: 'center',
        },
        {
          title: '创建日期',
          dataIndex: 'creat_dt',
          width: '90px',
          align: 'center',
        },
        {
          title: '组件的需求日期',
          dataIndex: 'bdter',
          width: '120px',
          align: 'center',
        },
        {
          title: '提货数',
          dataIndex: 'jpqty',
          width: '80px',
          align: 'center',
        },
        {
          title: '物料凭证编号',
          dataIndex: 'mblnr',
          width: '100px',
          align: 'center',
        },
        {
          title: '物料凭证年度',
          dataIndex: 'mjahr',
          width: '120px',
          align: 'center',
        },
        {
          title: '特殊库存标识',
          dataIndex: 'sobkz',
          width: '120px',
          align: 'center',
        },
        {
          title: 'WBS 要素',
          dataIndex: 'posid',
          width: '90px',
          align: 'center',
        },
        {
          title: '打印日期',
          dataIndex: 'printdt',
          width: '90px',
          align: 'center',
          // customRender: (text, record) => (
          //   <a-tooltip placement="topLeft" title={record.PRINTDT}>
          //     {fermitTime(record.PRINTDT)}
          //   </a-tooltip>
          // ),
        },
        {
          title: '打印时间',
          dataIndex: 'printtt',
          width: '90px',
          align: 'center',
          // customRender: (text, record) => (
          //   <a-tooltip placement="topLeft" title={record.PRINTTT}>
          //     {fermitTime(record.PRINTTT)}
          //   </a-tooltip>
          // ),
        },
        {
          title: '物料编号',
          dataIndex: 'matnr',
          width: '160px',
          align: 'center',
        },
        {
          title: '物料描述',
          dataIndex: 'maktx',
          width: this.maktxWidth,
          align: 'center',
          customCell: () => {
            return {
              style: {
                width: this.maktxWidth,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                cursor: 'pointer',
              },
            }
          },
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={record.maktx}>
              {record.maktx}
            </a-tooltip>
          ),
        },
        {
          title: '成本中心',
          dataIndex: 'kostl',
          width: '120px',
          align: 'center',
        },
        {
          title: '一般姓名',
          dataIndex: 'kostl',
          width: '120px',
          align: 'left',
          customCell: () => {
            return {
              style: {
                width: '120px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                cursor: 'pointer',
              },
            }
          },
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={record.kostl}>
              {record.kostl}
            </a-tooltip>
          ),
        },
        {
          title: '工厂',
          dataIndex: 'kostl',
          width: '100px',
          align: 'center',
        },
        {
          title: '存储位置',
          dataIndex: 'lgort',
          width: '80px',
          align: 'center',
        },
        {
          title: '基本计量单位',
          dataIndex: 'meins',
          width: '120px',
          align: 'center',
        },
        {
          title: '需求量',
          dataIndex: 'bdmng',
          width: '80px',
          align: 'center',
        },
        {
          title: '非限制使用的估价的库存',
          dataIndex: 'labst',
          width: '170px',
          align: 'center',
        },
        {
          title: '收货方',
          dataIndex: 'wempf',
          width: '80px',
          align: 'center',
        },
        {
          title: '项目文本',
          dataIndex: 'sgtxt',
          width: '100px',
          align: 'left',
          customCell: () => {
            return {
              style: {
                width: '120px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                cursor: 'pointer',
              },
            }
          },
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={record.sgtxt}>
              {record.sgtxt}
            </a-tooltip>
          ),
        },
        {
          title: '批号',
          dataIndex: 'charg',
          width: '100px',
          align: 'center',
        },
        {
          title: '标准折算',
          dataIndex: 'bzzs',
          width: '100px',
          align: 'center',
        },
        {
          title: '拣配人',
          dataIndex: 'jpuname',
          width: '100px',
          align: 'center',
        },
        {
          title: '过账人',
          dataIndex: 'gzuname',
          width: '100px',
          align: 'center',
        },
        ,
        {
          title: '打印人',
          dataIndex: 'dyuname',
          width: '100px',
          align: 'center',
        },
      ],
      dictMap: {},
      showpagination: false,
    }
  },
  created() {
    this.openInit()
  },
  methods: {
    fermitTime,
    openInit() {
      this.pagination = {}
      this.records = []
      this.multipleSelection = []
      this.selectedRowKeys = []
      let flag = false
      if (this.$route.params && this.$route.params.type) {
        if (this.$route.params.type == 'costCenter') {
          flag = true
          this.$set(this.pagination, 'costCenter', this.$route.params.no)
        }
        if (this.$route.params.type == 'wbsNo') {
          flag = true
          this.$set(this.pagination, 'wbsNo', this.$route.params.no)
        }
        if (this.$route.params.type == 'materialsNo') {
          flag = true
          this.$set(this.pagination, 'materialsNo', this.$route.params.no)
        }
      }
      if (flag) {
        this.fetchZmme17Data()
      }
    },
    fetchZmme17Data() {
      this.loading = true
      if (!this.pagination.current || this.pagination.current < 1) {
        this.$set(this.pagination, 'current', 1)
      }
      let offset = (this.pagination.current - 1) * this.pagination.pageSize
      this.$set(this.pagination, 'offset', offset)
      this.$set(this.pagination, 'rows', this.pagination.pageSize)
      postAction(this.urls.zmme17Data, this.pagination).then((res) => {
        this.loading = false
        if (res.code == 200) {
          let list = res.result.records
          list.map((element) => {
            element.randomStr = this.getRandomStr(10)
          })
          this.showpagination = false
          this.records = list
          this.$set(this.pagination, 'total', parseInt(res.result.total))
          if (this.records.length <= 0) {
            this.$message.warning('SAP里不存在相关记录! ')
          }
          this.columns = this.calcMaktxWidth(this.records, this.columns, ['maktx', 'wempf'])
        } else {
          this.$message.error('获取sap数据失败! ' + res.msg)
        }
      })
    },
    pageChange(current, pageSize) {
      this.$set(this.pagination, 'pageSize', pageSize)
      this.$set(this.pagination, 'current', current)
      this.fetchZmme17Data()
    },
    onShowSizeChange(current, pageSize) {
      this.$set(this.pagination, 'pageSize', pageSize)
      this.$set(this.pagination, 'current', 1)
      this.fetchZmme17Data()
    },
    handleSearch() {
      if (this.loading) {
        return
      }
      if (!this.pagination.costCenter && !this.pagination.wbsNo && !this.pagination.materialsNo) {
        return this.$message.warning('请至少输入一个条件进行查询')
      }
      if (this.pagination.materialsAddr) {
        let list = JSON.parse(window.localStorage.getItem('materialsAddr'))
        if (!list) {
          list = []
        }
        if (list.indexOf(this.pagination.materialsAddr) > -1) {
          list.splice(list.indexOf(this.pagination.materialsAddr), 1)
        }
        list.splice(0, 0, this.pagination.orderNo)
        if (list.length > 10) {
          this.orderNoSuggetions = list.slice(0, 10)
        } else {
          this.orderNoSuggetions = list
        }
        window.localStorage.setItem('materialsAddr', JSON.stringify(this.orderNoSuggetions))
      }

      this.records = []
      this.$set(this.pagination, 'current', 1)
      this.fetchZmme17Data()
    },
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowKeys = selectedRowKeys
      this.multipleSelection = selectedRow
    },
    getRandomStr(len) {
      len = len || 32
      var $chars =
        'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
  },
}
</script>

<style scoped>
.demo-table-expand .a-form-model-item {
  margin-right: 0;
  margin-bottom: 0px;
}
.demo-table-expand span {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-form-model-item >>> .a-form-model-item--mini .a-form-model-item__label {
  color: #606266 !important;
  font-size: 12px !important;
  font-weight: normal;
}
.a-table >>> .a-table__expanded-cell[class*='cell'] {
  padding: 0px 0px 10px 0px;
}

.expand-title {
  height: 30px;
  line-height: 30px;
  background-color: #f1f1f1;
  padding-left: 50px;
  margin-bottom: 5px;
  font-size: 12px;
}
.a-form-model-item >>> .a-form-model-item__content {
  height: 36px;
}
.ellipse-tooltips {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipse-tooltips span {
  width: unset !important;
}
.a-range >>> .a-range-separator {
  width: 20px;
}
.pagination {
  display: flex;
  flex-direction: row;
}
.pagination-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 85vw;
}
.pagination-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  border-left: #cccccc 2px solid;
}
</style>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(~@assets/contract-top.png);
  }
  .container {
    .content-list {
      margin-top: 15px;
    }
  }
  .font-active {
    cursor: pointer;
  }
}
</style>